<template>
    <div class="product col tcenter">
        <div class="product-name cr-2">许你一个平凡的世界</div>
        <div class="product-title">有品质的业务平台，青爱科技</div>
        <div  class="product-list row">
            <div class="product-list-con col"  v-for="(item,index) in product" :key="index" :class="item.bg" @click="getShopIndex(index)">
                <img :src="item.img" alt="">
                <span>{{item.name}}</span>
            </div>
        </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      product: [
        {
          name: "微信商城",
          img: require("../../static/img/store.png"),
          bg: "orange",
          route:"shop"
        },
        {
          name: "微信小程序",
          img: require("../../static/img/project.png"),
          bg: "pink",
          route:'miniProgram'
        },
        {
          name: "淘宝优惠券",
          img: require("../../static/img/ticket.png"),
          bg: "blue",


          
          route:'ticket'
        },
        {
          name: "PPT商城",
          img: require("../../static/img/game.png"),
          bg: "red",
          route:'pptshop'
        }
      ]
    };
  },
  methods:{
     getShopIndex(index){
        let route=this.product[index].route;
        this.$router.push({
          name:route
        })
     }
  }
};
</script>


<style lang="less" scoped>
.product {
  padding: 20px 10vw;
}
.product-name {
  margin-top: 20px;
  font-size: 22px;
  font-weight: bold;
}
.product-title {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 18px;
}
.product-list {
  justify-content: space-around;
}
.product-list-con {
  width: 24%;
  height: 200px;
  transition: all 1s ease;
}
.product-list-con img {
  width: 98px;
  height: 98px;
  margin: 20px auto;
}
.product-list-con span {
  color: #fff;
  font-size: 20px;
  margin-top: 2px;
}
.product-list-con:hover {
  transform: scale(1.1);
}
</style>
